<template>
	<div class="tags">
		<div class="tag">
			<el-tag
				:key="tag.meta.jumpNo"
				v-for="(tag, index) in tagList"
				:closable="tag.name !== 'home'"
				:disable-transitions="false"
				@close="closeTag(tag, index)"
				@click="chooseTag(tag)"
				:effect="$route.fullPath === tag.meta.toPath ? 'dark' : 'plain'"
			>
				{{ tag.meta.jumpNo === 31 ? '黑名单账号管理' : tag.meta.jumpNo === 32 ? '黑名单分组管理' : tag.meta.jumpNo === 33 ? '黑名单呼叫记录' : tag.meta.title }}
			</el-tag>
		</div>
		<div class="reload">
			<span class="el-icon-refresh-left icon" @click="reloadPage"></span>
			<!-- <span class="el-icon-s-operation icon"></span> -->
		</div>
	</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
	name: 'tags',
	data() {
		return {};
	},
	computed: {
		...mapState({
			tagList: state => state.menu.tagList
		})
	},
	mounted() {
		// 根据权限删除无权限的菜单
		const permission = localStorage.getItem(`zco_route_permission_${window.uid}`) || '';
		const permissionJson = JSON.parse(permission) || [];
		let list = this.tagList.filter(tag => permissionJson.find(item => tag.path.includes(item)));
		const defaultList = [
			{
				path: '/index/home',
				name: 'home',
				meta: { title: '首页', type: '', keepAlive: true, jumpNo: 0, toPath: '/index/home' }
			}
		];
		list = list.filter(item => item.name !== 'home');

		this.$store.commit('REPLACE_TAG_LIST', defaultList.concat(list));
	},
	methods: {
		...mapMutations('menu', ['CLEAR_TAG', 'SET_SCENE_DATA', 'REPLACE_TAG_LIST']),
		closeTag(tag, index) {
			this.$store.commit('CLEAR_TAG', tag.name);
			// 关闭标签更新业务场景状态
			if (tag.name.startsWith('scene') && this.tagList[index - 1].meta.data) {
				this.$store.commit('SET_SCENE_DATA', tag.meta.data);
				localStorage.setItem('sceneStatus', this.tagList[index - 1].meta.data.sceneStatus);
				console.log(this.tagList[index - 1].meta.data);
				console.log(this.tagList[index - 1].meta.data);
				sessionStorage.setItem('sceneData', JSON.stringify(tag.meta.data));
			}
			this.$router.push(this.tagList[index - 1].meta.toPath);
		},
		chooseTag(tag) {
			// 点击标签更新业务场景状态
			if (tag.name.startsWith('scene') && tag.meta.data) {
				this.$store.commit('SET_SCENE_DATA', tag.meta.data);
				localStorage.setItem('sceneStatus', tag.meta.data.sceneStatus);
				console.log(tag.meta.data.sceneStatus);
				sessionStorage.setItem('sceneData', JSON.stringify(tag.meta.data));
			}
			this.$router.push(tag.meta.toPath);
			this.$emit('chooseTag', tag);
		},
		reloadPage() {
			this.$router.go(0);
		}
	}
};
</script>

<style lang="less" scoped>
.tags {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.reload {
		.icon {
			cursor: pointer;
			padding-left: 10px;
			font-size: 24px;
			color: #97a8be;
		}
	}
	.el-tag {
		cursor: pointer;
		margin: 0 10px 10px 0;
	}
}
</style>
